<script setup>
  import { SORT_PULL_LIST } from '@/contants/home'

  const emit = defineEmits(['close', 'change'])
  let currentIndex = 0
  const onSelectSort = (item, index) => {
    if (currentIndex === index) return
    currentIndex = index
    SORT_PULL_LIST.value.forEach((item) => {
      item.isSelected = false
    })
    item.isSelected = true
    // 通知关闭弹出层
    emit('close')
    emit('change', item)
  }
</script>

<template>
  <view class="filter-by-sort">
    <view
      class="filter-by-sort-item"
      v-for="(item, index) in SORT_PULL_LIST"
      :class="{ active: item.isSelected }"
      :key="item.key"
      @click="onSelectSort(item, index)"
    >
      <text>{{ item.name }}</text>
      <bit-icon
        v-if="item.isSelected"
        color="#0FA1FE"
        >&#xe648;</bit-icon
      >
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .filter-by-sort {
    &-item {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 20rpx 14rpx 20rpx 0;
      font-size: var(--font-size-md);
      color: var(--text-color-dark);
      border-bottom: 1rpx solid var(--border-color);
      &.active {
        color: var(--text-active-color);
      }
      &:last-child {
        border-color: transparent;
      }
    }
  }
</style>
